<template>
  <div class="wu-dialog">
    <el-dialog
      v-model="visible"
      :title="title"
      :width="width"
      :close-on-click-modal="false"
      :before-close="handleClose"
      append-to-body
    >
      <slot name="header"></slot>
      <slot></slot>

      <template #footer>
        <span class="dialog-footer">
          <slot v-if="hasCustomFooter" name="footer"></slot>
          <template v-else>
            <el-button @click="onCancel">Cancel</el-button>
            <el-button type="primary" @click="onConfirm">Confirm</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    width: string | number
    title: string
  }>(),
  {
    width: '600px',
    title: '弹窗标题'
  }
)
const emits = defineEmits(['onconfirm', 'oncancel'])

const slots = useSlots()
// 是否有自定义底部插槽
const hasCustomFooter = computed(() => {
  return slots.footer
})

const visible = ref(false)
const handleClose = (done: () => void) => {
  done()
}
// 确定
const onConfirm = () => {
  emits('onconfirm')
}
// 取消
const onCancel = () => {
  emits('oncancel')
  closeDia()
}
// 打开
const openDia = () => {
  visible.value = true
}
// 关闭
const closeDia = () => {
  emits('oncancel')
  visible.value = false
}
defineExpose({
  openDia,
  closeDia
})
</script>

<style lang="scss" scoped></style>
